<template>
  <div>
    <!-- 流水列表 -->
    <el-card>
      <el-form :model="searchForm" ref="searchRef" inline>
        <el-form-item label="订单编号" prop="orderCode">
          <el-input
            v-model="searchForm.orderCode"
            placeholder="请输入订单编号"
            class="form_input"
          />
        </el-form-item>
        <el-form-item label="创建人姓名" prop="createName">
          <el-input
            v-model="searchForm.createName"
            placeholder="请输入创建人姓名"
            class="form_input"
          />
        </el-form-item>
        <el-form-item label="收支类型" prop="bType">
          <el-select
            v-model="searchForm.bType"
            filterable
            placeholder="请选择收支类型"
            @change="getList()"
          >
            <el-option label="全部" :value="0" />
            <el-option label="收入" :value="1" />
            <el-option label="支出" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单类型" prop="orderType">
          <el-select
            v-model="searchForm.orderType"
            filterable
            placeholder="请选择订单类型"
            @change="getList()"
          >
            <el-option label="全部" :value="0" />
            <el-option label="采购单" :value="1" />
            <el-option label="销售单" :value="2" />
            <el-option label="其他" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="Search"
            @click="getList()"
            class="btn"
          >
            查询
          </el-button>
          <el-button icon="Refresh" @click="handleReset" class="btn">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="mt-1 bill_card">
      <template #header>
        <div class="w-full flex justify-between items-center">
          <div class="w-[80%] text-[0.7rem] text-[red] flex items-center">
            <div v-if="searchForm.bType != 2" class="mr-5">
              应收入总金额 :
              {{ detail.inAmount ? (detail.inAmount / 100).toFixed(2) : 0 }}元
            </div>
            <div v-if="searchForm.bType != 1" class="mr-5">
              应支出总金额 :
              {{ detail.outAmount ? (detail.outAmount / 100).toFixed(2) : 0 }}元
            </div>
            <div v-if="searchForm.bType != 2" class="mr-5">
              实收入总金额 :
              {{
                detail.inActualAmount
                  ? (detail.inActualAmount / 100).toFixed(2)
                  : 0
              }}元
            </div>
            <div v-if="searchForm.bType != 1" class="mr-5">
              实支出总金额 :
              {{
                detail.outActualAmount
                  ? (detail.outActualAmount / 100).toFixed(2)
                  : 0
              }}元
            </div>
          </div>
          <div>
            <el-button
              type="danger"
              icon="Delete"
              :disabled="!batchList || batchList.length == 0"
              @click="handleBatchDelete"
              >批量删除</el-button
            >
            <el-button type="primary" icon="Plus" @click="openDrawer"
              >新增</el-button
            >
          </div>
        </div>
      </template>

      <el-table
        :data="tableData"
        style="height: calc(100vh - 19rem)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="orderCode" label="订单编号" />
        <el-table-column prop="createName" label="创建人姓名" />
        <el-table-column label="收支类型">
          <template #default="{ row }">
            <el-tag type="primary" v-if="row.bType == 1"> 收入</el-tag>
            <el-tag type="danger" v-else> 支出</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单类型">
          <template #default="{ row }">
            <el-tag type="primary" v-if="row.orderType == 1"> 采购单</el-tag>
            <el-tag type="danger" v-else-if="row.orderType == 2">
              销售单</el-tag
            >
            <el-tag type="info" v-else-if="row.orderType == 3"> 其他</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="应付/应收金额(元)">
          <template #default="{ row }">
            {{ row.amount ? (row.amount / 100).toFixed(2) : "0.00" }}
          </template>
        </el-table-column>
        <el-table-column prop="actualAmount" label="实付/实收金额(元)">
          <template #default="{ row }">
            {{
              row.actualAmount ? (row.actualAmount / 100).toFixed(2) : "0.00"
            }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template #default="{ row }">
            {{ $initTime(row.createdAt * 1000, 2) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="备注"
          show-overflow-tooltip
        />
        <el-table-column label="操作" align="center" fixed="right">
          <template #default="{ row }">
            <el-button type="danger" link @click="handleDelete(row.id)">
              <el-icon><Delete /></el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <PagingQuery
        :page="page"
        :size="size"
        :total="total"
        @getList="getList"
        class="mt-1"
      />
    </el-card>

    <el-drawer v-model="drawer" title="新增" size="40%" destroy-on-close>
      <InsertBill @handleBack="handleBack" />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PagingQuery from "@/components/PagingQuery.vue";
import InsertBill from "./component/InsertBill.vue";
import { handleApiResponse } from "@/utils/request.js";
import {
  GetStatementsList,
  DeleteStatements,
} from "../../../../wailsjs/go/api/OrderApi";

onMounted(() => {
  getList();
});

const searchRef = ref(null);
const searchForm = ref({});

const page = ref(1);
const size = ref(10);
const total = ref(0);
const detail = ref({});
const tableData = ref([]);
async function getList(e) {
  if (e) {
    page.value = e.page;
    size.value = e.size;
  }
  handleApiResponse(() =>
    GetStatementsList({
      page: page.value,
      size: size.value,
      ...searchForm.value,
    })
  ).then((res) => {
    if (res.code == 0) {
      detail.value = res.data || {};
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  });
}

const handleReset = () => {
  searchRef.value.resetFields();
  getList();
};

// 1.批量删除
const batchList = ref([]);
const handleSelectionChange = (val) => {
  batchList.value = val.map((item) => item.id);
};

const handleBatchDelete = () => {
  ElMessageBox.confirm("你确定要批量这些记录吗", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    handleApiResponse(() => DeleteStatements({ ids: batchList.value })).then(
      (res) => {
        if (res.code == 0) {
          ElMessage.success("删除成功");
          getList();
        }
      }
    );
  });
};

// 2.单个删除
const handleDelete = (id) => {
  ElMessageBox.confirm("你确定删除此条记录吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    handleApiResponse(() => DeleteStatements({ ids: [id] })).then((res) => {
      if (res.code == 0) {
        ElMessage.success("删除成功");
        getList();
      }
    });
  });
};

// 新增
const drawer = ref(false);
const openDrawer = () => {
  drawer.value = true;
};
const handleBack = (val) => {
  if (val == 1) {
    getList();
  }
  drawer.value = false;
};
</script>

<style scoped lang="scss">
.bill_card :deep(.el-card__header) {
  @apply px-2 py-1;
}
</style>